<template>
  <div class="list_container flex both-100">
    <Breadcrumb :title="pageTitle" />
    <div class="content_container">
      <!-- 搜索模块 -->
      <el-form ref="searchMap" :inline="true" :model="searchMap" class="serach_wrapper flex-space-between">
        <div class="search">
          <el-form-item prop="menuName" size="small">
            <el-input v-model="searchMap.menuName" placeholder="菜单名称"></el-input>
          </el-form-item>
          <el-form-item prop="status" style="width: 220px" size="small">
            <el-select v-model="searchMap.status" placeholder="状态">
              <el-option v-for="option in sysDisableType" :key="option.type" :label="option.name" :value="option.type"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="flex">
            <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
            <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
          </el-form-item>
        </div>
        <div class="edit">
          <el-form-item class="flex">
            <el-button @click="handleAdd()" class="btn_primary" icon="el-icon-plus">
              新增
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 搜索模块over -->

      <!-- 表格模块 -->
      <div class="table_container">
        <el-table stripe :data="menuList" v-loading="loading" row-key="menuId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="menuName" label="菜单名称" width="160" align="left"></el-table-column>
          <el-table-column prop="icon" label="图标"></el-table-column>
          <el-table-column prop="orderNum" label="排序"></el-table-column>
          <el-table-column prop="perms" label="权限标识"></el-table-column>
          <el-table-column prop="component" label="组件路径"></el-table-column>
          <el-table-column key="status" label="状态">
            <template slot-scope="scope">
              <!-- <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch> -->
              <span :class="scope.row.status === '0'? 'tag_primary' : 'tag_warning'">{{ scope.row.status | filterSysDisableType }}</span>

            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div class="button-group">
                <span type="text" class="tag_primary" size="small" @click="handleEdit(scope.row, 'edit')">编辑</span>
                <span type="text" class="tag_warning" size="small" @click="handleDelete(scope.row, 'delect')">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 表格模块over -->
    </div>
    <!-- 弹框 -->
    <el-dialog title="菜单" :visible.sync="DialogVisibleMenu" append-to-body :close-on-click-modal="false">
      <el-form ref="menuForm" :model="formModel" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="parentId" size="small">
              <treeselect v-model="formModel.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="menuType" size="small">
              <el-radio-group v-model="formModel.menuType">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单来源" prop="menuSource" size="small" v-if="formModel.menuType != 'F'">
              <el-radio-group v-model="formModel.menuSource">
                <el-radio label="0">PC</el-radio>
                <el-radio label="1">APP</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName" size="small">
              <el-input v-model="formModel.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum" size="small">
              <el-input-number v-model="formModel.orderNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formModel.menuType != 'F'">
            <el-form-item prop="isFrame" size="small">
              <span slot="label">
                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                是否外链
              </span>
              <el-radio-group v-model="formModel.isFrame">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formModel.menuType != 'F'">
            <el-form-item prop="path" size="small">
              <span slot="label">
                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                路由地址
              </span>
              <el-input v-model="formModel.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formModel.menuType == 'C'">
            <el-form-item prop="component" size="small">
              <span slot="label">
                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                组件路径
              </span>
              <el-input v-model="formModel.component" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formModel.menuType != 'M'">
            <el-form-item prop="perms" size="small">
              <el-input v-model="formModel.perms" placeholder="请输入权限标识" maxlength="100" />
              <span slot="label">
                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                权限字符
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formModel.menuType == 'C'">
            <el-form-item prop="query" size="small">
              <el-input v-model="formModel.query" placeholder="请输入路由参数" maxlength="255" />
              <span slot="label">
                <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                路由参数
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formModel.menuType == 'C'">
            <el-form-item prop="isCache" size="small">
              <span slot="label">
                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                是否缓存
              </span>
              <el-radio-group v-model="formModel.isCache">
                <el-radio label="0">缓存</el-radio>
                <el-radio label="1">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formModel.menuType != 'F'">
            <el-form-item prop="visible" size="small">
              <span slot="label">
                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                显示状态
              </span>
              <el-radio-group v-model="formModel.visible">
                <el-radio v-for="dict in dict.type.sys_show_hide" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="status" size="small">
              <span slot="label">
                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                菜单状态
              </span>
              <el-radio-group v-model="formModel.status">
                <el-radio v-for="dict in sysDisableType" :key="dict.type" :label="dict.type">{{dict.name}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="DialogVisibleMenu = false" class="btn_cancel">取 消</el-button>
        <el-button type="primary" @click="submitFrom('MenuFrom')" class="btn_primary">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹框 over-->
  </div>
</template>

<script>
import { listMenu, getMenu, addMenu, updateMenu, delMenu } from '@/api'
import { handleTree } from '@/utils/ruoyi'
import { sysDisableType } from '@/enum'
import { filterSysDisableType } from '@/utils/filters'
export default {
  dicts: ['sys_show_hide', 'sys_normal_disable'],
  name: 'role',
  data () {
    return {
      // 菜单状态
      sysDisableType,
      // 表格加载状态,
      loading: false,
      // 编辑弹框状态
      DialogVisibleMenu: false,
      // 总条数
      total: '',
      // 搜索条件
      searchMap: {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数
        menuName: undefined,
        status: undefined,
        createTime: undefined
      },
      // 表单数据
      formModel: {},
      // 角色列表
      menuList: [],
      // 总条数
      total: 0,
      // 树形菜单数据
      menuOptions: [],
      rules: {
        menuName: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ],
        orderNum: [
          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
        ],
        path: [
          { required: true, message: "路由地址不能为空", trigger: "blur" }
        ]
      },
      menuTypeOption: [
        {
          label: '正常',
          value: '0'
        },
        {
          label: '停用',
          value: '1'
        }
      ],
      status1: '1',
      status2: '0'
      // menuId: undefined,
      // parentId: 0,
      // menuName: undefined,
      // icon: undefined,
      // menuType: "M",
      // orderNum: undefined,
      // isFrame: "1",
      // isCache: "0",
      // visible: "0",

      // status: "0"


    }
  },
  created () {
    this.getList()
    this.getTreeselect()
  },
  computed: {
    pageTitle () {
      return '菜单管理'
    }
  },
  methods: {
    getList () {
      this.loading = true
      listMenu(this.searchMap).then(response => {
        const resp = response
        this.menuList = handleTree(resp.data, "menuId");
        this.total = this.menuList.length
        this.loading = false
      })
    },
    // 点击查询
    handleSearch () {
      this.searchMap.pageNum = 1
      this.getList()
    },
    // 清空表单数据
    handleReset () {
      this.$refs['searchMap'].resetFields()
      this.handleSearch()
    },
    // 菜单编辑
    handleEdit (row) {
      this.resetForm()
      this.DialogVisibleMenu = true
      getMenu(row.menuId).then(response => {
        const resp = response.data
        this.formModel = resp
      })
    },
    // 菜单新增
    handleAdd () {
      this.resetForm()
      this.getTreeselect()
      this.DialogVisibleMenu = true
    },
    // 点击删除
    handleDelete (row) {
      const menuId = row.menuId
      this.$confirm(`是否删除${row.menuName}`, '删除', {
        type: 'error',
        configButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        delMenu(menuId).then((response) => {
          const resp = response
          if (resp.code === 200) {
            this.$message.success(resp.msg)
            this.getList()
          } else {
            this.$message.error(resp.msg)
          }
        })
      })
    },
    // 表单重置
    resetForm () {
      this.formModel = {
        menuId: undefined,
        parentId: 0,
        menuName: undefined,
        menuSource: '0',
        icon: undefined,
        menuType: 'M',
        orderNum: undefined,
        isFrame: '1',
        isCache: '1',
        visible: '0',
        status: '0'
      }
    },
    /** 查询菜单下拉树结构 */
    getTreeselect () {
      listMenu().then(response => {
        const resp = response
        this.menuOptions = [];
        const menu = { menuId: 0, menuName: '主类目', children: [] };
        menu.children = handleTree(resp.data, "menuId");
        this.menuOptions.push(menu);
      });
    },
    /** 转换菜单数据结构 */
    normalizer (node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children
      };
    },
    submitFrom () {
      this.$refs['menuForm'].validate(valid => {
        if (valid) {
          if (this.formModel.menuId === undefined) {
            addMenu(this.formModel).then(res => {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.DialogVisibleMenu = false
              this.getList()
            })
          } else {
            updateMenu(this.formModel).then(res => {
              if (200 === res.code) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.DialogVisibleMenu = false
                this.getList()
              }
            })
          }
        }
      })
    },
  },
  filters: {
    filterSysDisableType
  }
}
</script>

<style lang="less" scoped>
.list_container {
  flex-direction: column;
  background: url("@/assets/images/home/content.png") no-repeat;
  background-size: cover;
  .content_container {
    padding: 15px 20px;
    overflow-y: scroll;
  }
  .table_container {
    margin-bottom: 25px;
  }
  .pagination_container {
    display: flex;
    justify-content: space-between;
    height: 32px;
  }
}
</style>